<template>
  <div class="divisional">
    <el-row style="height: 1px;">

    </el-row>
    <el-row :gutter="20">
      <el-col :span="24">
        <el-table
          v-loading="loading"
          element-loading-text="数据加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(212, 216, 206, 1)"
          :data="tableData" :header-cell-style="{background:'LightYellow	',color:'black'}"
          style="width: 100%">
          <el-table-column prop="beanName" label="服务名称"></el-table-column>
          <el-table-column prop="methodName" label="应用名称"></el-table-column>
          <el-table-column prop="params" label="描述"></el-table-column>
          <el-table-column prop="cronExpression" label="定时策略"></el-table-column>
          <el-table-column prop="remark" label="备注" width></el-table-column>
          <el-table-column prop="status" label="状态">
            <template slot-scope="scope">
              <span v-if="scope.row.status == '0'">正在运行</span>
              <span v-if="scope.row.status == '1'">未运行</span>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="234px">
            <template slot-scope="scope">
                <el-button v-if="scope.row.status == '0'" @click="pauseJob(scope.row)" type="primary" size="small">暂停</el-button>
                <el-button v-if="scope.row.status == '1'" @click="startJob(scope.row)" type="primary" size="small">启动</el-button>
                <el-button @click="ExeJob(scope.row)" type="primary" size="small">执行</el-button>
                <el-button @click="editJob(scope.row)" type="primary" size="small">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <div class="pageBox">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
        :page-sizes="[5, 10, 15,20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
    </div>

    <el-dialog :visible.sync="editFlag" width="50%">
      <span slot="title">编辑定时任务</span>
      <div class="infoBox">
        <label for>服务名称:</label>
        <el-input v-model="jobInfo.beanName" size="small" disabled placeholder="请输入内容"></el-input>
      </div>
      <div class="infoBox">
        <label for>方法名称:</label>
        <el-input v-model="jobInfo.methodName" size="small" disabled placeholder="请输入内容"></el-input>
      </div>
      <div class="infoBox">
        <label for>参数:</label>
        <el-input v-model="jobInfo.params" size="small" placeholder="请输入内容"></el-input>
      </div>
      <div class="infoBox">
        <label for>定时表达式:</label>

        <el-popover v-model="cronPopover">
          <el-input slot="reference" @click="cronPopover=true" v-model="jobInfo.cronExpression" placeholder="请输入定时策略"></el-input>
          <cron @change="changeCron" @close="cronPopover=false" i18n="cn"></cron>
        </el-popover>
      </div>
      <div class="infoBox">
        <label for>备注:</label>
        <el-input v-model="jobInfo.remark" size="small" placeholder="请输入内容"></el-input>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelEdit">取 消</el-button>
        <el-button type="primary" @click="updateJob">保存</el-button>
      </span>


    </el-dialog>
  </div>
</template>
<script>
  import {
    Message
  } from "element-ui";
  import {
    jobUrl
  } from "../../../static/baseUrl";
  import {
    cron
  } from 'vue-cron';
  export default {
    components: {
      cron
    },
    data() {
      return {
        cronPopover: false,
        cron: '',
        dateVlaue: "",
        isInfodetail: false,
        currentPage: 1,
        total: 0,
        pageSize: 10,
        list_1: [],
        options: [],
        tableData: [],
        //   逾期选择
        isFirstIssue: "",
        yuqiOptions: [],
        //   催收
        cuishouNum: "",
        //   催收方式
        outbound: "",
        outboundOptions: [],
        //   风险等级
        risklevel: "",
        risklevelOptions: [],
        //   逾期等级
        overdueLevelF: "",
        overdue_levelS: "",
        overdueLevelOptions: [],
        //    任务详情
        jobInfo: [],
        editFlag: false,
        loading: false,
      };
    },
    created() {
      this.checkInfo();
    },
    methods: {
      changeCron(val) {
        this.cron = val;
        this.$set(this.jobInfo, "cronExpression", val);
      },
      handleCurrentChange(data) {
        this.currentPage = data;
        this.checkInfo();
      },
      handleSizeChange(data) {
        this.pageSize = data;
        this.checkInfo();
      },

      handleClick(data) {
        this.detailInfo.splice(this.detailInfo.length);
        Object.keys(data).forEach((item) => {
          let obj = {
            label: this.handleInfoDetail(item),
            value: data[item],
          };
          this.detailInfo.push(obj);
        });
        this.isInfodetail = true;
      },
      reset() {

      },
      checkInfo() {

        let options = {
          page: this.currentPage,
          pageSize: this.pageSize,
        };

        this.loading = true;
        this.$axios({
            method: "post",
            url: `/JOB/job/list?`,
            params: options,
          })
          .then((res) => {
            this.loading = false;
            if (res.code == 200) {
              this.tableData = res.data.list;
              this.total = Number(res.data.total);
            } else {
              Message.warning(res.message);
            }
          })
          .catch((err) => {});
      },
      //暂停Job
      pauseJob(data) {
        console.log(data, "暂停操作！！");
        this.jobInfo = {};
        this.jobInfo = Object.assign({}, data);
        this.$set(this.jobInfo, "status", "1");
        console.log(data, "暂停操作！！");
        this.updateJob();
      },
      //启动Job
      startJob(data) {
        this.jobInfo = {};
        this.jobInfo = Object.assign({}, data);
        this.$set(this.jobInfo, "status", "0");
        console.log(data, "启动操作！！");
        this.updateJob();
      },
      //编辑Job
      editJob(data) {
        this.jobInfo = {};
        this.jobInfo = Object.assign({}, data);
        this.editFlag = true;
      },
      //保存Job
      updateJob() {
        console.log(this.jobInfo, "保存操作！！");
        let option = this.jobInfo;
        this.$axios({
            method: "post",
            url: `/JOB/job/update`,
            data: option,
          })
          .then((res) => {
            console.log(res, "更新数据返回值");
            if (res.code == 200) {
              Message.warning("操作成功！");
            } else {
              Message.warning(res.message);
            }

            this.editFlag = false;
            this.checkInfo();
          })
          .catch((err) => {});
      },
      cancelEdit() {
        this.jobInfo = {};
        this.editFlag = false;
      },
      //手动执行任务（一次）
      ExeJob(data) {
        console.log("执行任务", data);
        let params = {
          ids: data.jobId,
        }
        this.$axios({
            method: "post",
            url: `/JOB/job/run`,
            params: params,
            headers:{'Content-Type':'application/x-www-form-urlencoded'},
          })
          .then((res) => {
            console.log(res, "更新数据返回值");
            if (res.code == 200) {
              Message.success("操作成功！");
            } else {
              Message.warning(res.message);
            }
          })
          .catch((err) => {});
      }

    },
  };
</script>
<style lang="scss" scoped>
  .divisional {
    /deep/ .el-row:nth-child(1) {
      width: 100%;
      height: 20vh;
      // background: pink;
      padding: 0;
      margin: 0;

      .el-col {
        padding: 0;
        height: inherit;
        border: 1px solid slategrey;
        box-sizing: border-box;
        overflow: hidden;

        div:nth-child(1) {
          width: 100%;
          height: inherit;
          //   background: yellowgreen;
          display: flex;
          flex-wrap: wrap;
          // justify-content: flex-start;
          justify-content: space-around;
          box-sizing: border-box;
          padding-left: 30px;
          padding-top: 40px;
          overflow-y: auto;

          .v_box {
            width: 20%;
            height: 8vh;
            margin-left: 15px;
            margin-right: 40px;
            // margin-bottom: 10px;
            // background: chocolate;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            padding: 0;
            border: none;

            div {
              padding: 0;
            }

            &:nth-child(7) {

              .el-date-editor--daterange.el-input,
              .el-date-editor--daterange.el-input__inner,
              .el-date-editor--timerange.el-input,
              .el-date-editor--timerange.el-input__inner {
                width: 100%;
              }
            }

            &:last-child {
              display: flex;
              flex-direction: row;
              justify-content: center;
              align-items: center;

              .el-button {
                width: 70px;
                height: 30px;

                &:first-child {
                  margin-right: 10px;
                }
              }
            }
          }
        }
      }
    }

    /deep/ .el-row:nth-child(2) {
      width: 100%;
      //height: 70vh;
      // background: pink;
      padding: 0;
      margin: 0;
      margin-top: 10px;

      table {
        tbody {
          tr {
            td {
              .cell {
                box-sizing: border-box;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                word-break: normal !important;
                line-height: inherit;
                //   padding-right: 10px;
              }
            }
          }
        }
      }
    }

    .pageBox {
      display: flex;
      width: 100%;
      justify-content: left;
    }

    /deep/ .el-dialog {
      .mainInfoBox {
        width: 100%;
        height: 60vh;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        flex-wrap: wrap;
        overflow-y: auto;

        .infoBox {
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
          height: 40px;
          width: 30%;

          label {
            width: 100px;
          }

          .el-input {
            flex: 1 1 auto;
          }
        }
      }
    }
  }
</style>
